<template>
	<view >
		<view class="connect">
			<view class="shopInfo">
				<u-image @click="navTo(`/pages/shop_info/shop_info?id=${order_info.good.gid}`)" border-radius="15rpx" width="150rpx" height="150rpx" :src="order_info.good.pic"></u-image>
				<view class="shopInfo_right">
					<view class="shopInfo_right_item">
						<view class="title">订单号:</view>
						{{order_info.code}}
					</view>
					<view   class="shopInfo_right_item">
						<view  class="title">描述相符:</view>
						 <u-rate  v-model="rate_model"></u-rate>
					</view>
				</view>
			</view>
			<view class="textarea">
				<u-input placeholder="您的评价可以帮助他人" v-model="text_area" class="input_textarea" type="textarea"  />
				<view @click="change_anonymous" class="niming">
					<u-icon v-if="anonymous"  name="checkmark-circle-fill" color="#333" size="37"></u-icon>
					<view v-else  class="no_choose"></view>
					<span class="niming_class">匿名</span>
				</view>
			</view>
		
			<view class="phone">
				<view v-for="(item , index) in imageArr" :key="index"  class="up_box">
					<view @click="deleteImage(index)" class="imagClose">
						<u-icon name="close" color="#fff" size="15"></u-icon>
					</view>
					<u-image @click="previewImage(index)" border-radius="15rpx" width="150rpx" height="150rpx" :src="item"></u-image>
				</view>
				<view v-if="imageArr.length<6"  @click="upimage()" class="img_upload">
					<u-icon name="plus-circle-fill" color="#333" size="42"></u-icon>
					<view class="img_upload_connect" >上传{{imageArr.length}}/6</view>
				</view>
			</view>
		
		</view>
		<view class="btns_box_1">
			<u-button @click="SubmitEvent()" class="btns_submit" :custom-style="{'background':'#6993b7' ,color:'#fff'}"   :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">提交评论</u-button>
		</view>
	</view>
</template>

<script>
	import config from "@/config/index.js";
	const {baseUrl , imgUrl} = config;
	export default {
		data() {
			return {
				anonymous:true,// 是否匿名
				rate_model:5,
				checked:true,
				number:0,
				order_info:null,
				imageArr:[],
				text_area:'',
				token:'',
			}
		},
		onLoad(prames) {
			prames.good = JSON.parse(prames.good)
			this.order_info = prames
		},
		methods: {
			previewImage(index) {
		      uni.previewImage({
		        current: index, // 当前显示图片索引
		        urls: this.imageArr // 需要预览的图片http链接列表
		      });
		    },
			change_anonymous(){
			// 更改匿名状态
				this.anonymous = !this.anonymous
			},
			SubmitEvent(){
				if(this.text_area == ''){
					uni.showToast({
						title:"请输入评论内容",
						icon:'none'
					})
					return
				}
				var data = {
					"content": this.text_area,//评论内容
					"pic": this.imageArr.join(','),//图片
					"fraction": this.rate_model,//评分
					"goods_id": this.order_info.good.gid, //商品id
					"order_id": this.order_info.good.order_id ,//订单编号
					"is_anonymous":this.anonymous?1:0
				}
				this.$gugoApi.GoodsComment_add(data).then(res=>{
					uni.showToast({
						title:"评论成功",
						icon:'none',
						position:'top'
					})
					setTimeout(()=>{
						uni.navigateBack()
					} , 1200)
				})
				
				
			},
			deleteImage(index){
				// 删除图片
				this.imageArr.splice(index, 1)
			},
			upimage(){
				// 图片上传
				uni.chooseImage({
					sizeType:'compressed',
					count:1,
					success: (file) => {
						 var tempFilePaths = file.tempFilePaths;
						 uni.showLoading({
						 	title:'上传中',
							mask:true
						 })
						 uni.uploadFile({
						 	url: baseUrl+'index/index/file', // 后端给的接口地址
						 	type: 'POST',
						 	filePath: tempFilePaths[0],// 本地文件地址
						 	name: 'file',// 传给后端时二进制文件的key
						 	header: {
								// #ifdef MP-WEIXIN
									'content-type':'multipart/form-data', // 必须添加
								// #endif
						 	},
						 	success: (res) => {
								uni.hideLoading()
								var url = imgUrl+res.data
								var Urls = url.replace(/\\/g , '/')
								this.imageArr.push(Urls)
						 	},
						 	fail(err) {
								uni.hideLoading()
								uni.showToast({
									title:'上传失败,请重试!',
									icon:'none'
								})
						 	}
						 }); 
					}
				});
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('comment.css');
</style>
